﻿@namespace AntBlazor
@inherits AntSubMenuBase

    <CascadingValue Value=this>
        <li Ant-submenu class="@ClassMapper.Class" @ref="Ref" style="@Style" @attributes="Attributes" Id="@Id">
            <div class="@TitleDivClass.Class" style="@titleStyle"
                 @onmouseover="()=>SetMouseEnterState(true)"
                 @onmouseout="()=>SetMouseEnterState(false)"
                 @onclick="()=> ClickSubMenuTitle()">
                @if (icon != null)
                {
                    <AntIcon type="@icon"></AntIcon>
                }
     
                <span>@((MarkupString)title)</span>

                @if (Menu.isInDropDown)
                {
                    <span class="ant-dropdown-menu-submenu-arrow">
                        <AntIcon type="right" class="anticon-right ant-dropdown-menu-submenu-arrow-icon"></AntIcon>
                    </span>
                }
                else
                {
                    <i class="ant-menu-submenu-arrow"></i>
                }
            </div>
            @if (Menu.mode == AntDirectionVHIType.inline)
            {
                <ul class="@menuClassName ant-menu ant-menu-inline ant-menu-sub" style="transition: height 0.5s; @submenuStyle">
                    @ChildContent
                </ul>
            }
        </li>

            @if (open && Menu.mode != AntDirectionVHIType.inline)
            {
                <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
                <div class="ant-menu-submenu ant-menu-submenu-popup @PopupClassMapper.Class"
                     style="left:@(element.offsetLeft+element.clientWidth+10)px; top:@(element.offsetTop)px; @(isMouseHover?"":"display: none;")"
                     @onmouseout="()=>SetMouseEnterState(false)"
                     @onmouseover="()=>SetMouseEnterState(true)"
                     @onmouseout:stopPropagation
                     @onmouseover:stopPropagation>
                    <ul class="@menuClassName @PopupUlClassMapper.Class ant-menu-submenu-content" style="@(isMouseHover?"":"display: none;")">
                        @ChildContent
                    </ul>
                </div>
            </div>
        }
    </CascadingValue>


@code {

    string titleStyle => Menu.mode == AntDirectionVHIType.inline ?
        $"padding-left:{(paddingLeft ?? Level * Menu.inlineIndent)}px" : "";

    string submenuStyle => open ? "" : "height: 0px; overflow: hidden;";
}